<template>
    <div class="cardContent" v-if="resignFlag">
        <a-page-header
                :title="loginUser.roleName"
                sub-title="请查看您的离职申请，三思而后行！"
                :avatar="{ src: loginUser.pic }"
        >
            <template #extra>
                <a-button type="danger" @click="cancelResign">取消申请</a-button>
            </template>
        </a-page-header>
    </div>
    <div class="cardContent">
        <a-alert
                v-if="!resignFlag"
                message="提示信息"
                description="您正在填写申请离职信息，请三思而后行"
                type="info"
                style="margin-bottom: 10px"
                show-icon
        />
        <a-form :model="drawerData.billInfo" layout="vertical">
            <a-row :gutter="16">
                <a-col :span="12">
                    <a-form-item label="标题" name="title" v-bind="billInfoRef.validateInfos.title">
                        <a-input v-model:value="billInfo.title" :disabled="resignFlag"/>
                    </a-form-item>
                </a-col>
                <a-col :span="6" v-if="resignFlag">
                    <a-form-item label="状态" name="status">
                        <a-tag v-if="billInfo.status == 2" color="warning">
                            <template #icon>
                                <exclamation-circle-outlined/>
                            </template>
                            被驳回
                        </a-tag>
                        <a-tag v-else-if="billInfo.status == 0" color="processing">
                            <template #icon>
                                <sync-outlined :spin="true"/>
                            </template>
                            审批中
                        </a-tag>
                        <a-tag v-else color="success">
                            <template #icon>
                                <check-circle-outlined/>
                            </template>
                            审批通过
                        </a-tag>
                    </a-form-item>
                </a-col>
            </a-row>
            <a-row :gutter="16">
                <a-col :span="12">
                    <a-form-item label="离职时间" v-bind="billInfoRef.validateInfos.resignDate">
                        <a-date-picker :disabled="resignFlag"
                                       :disabled-date="disabledDate"
                                       v-model:value="billInfo.resignDate"
                                       placeholder="请选择离职时间"
                                       @change="onChange"/>
                    </a-form-item>
                </a-col>
            </a-row>
            <a-row :gutter="16">
                <a-col :span="24">
                    <a-form-item label="离职原因" v-bind="billInfoRef.validateInfos.remark">
                        <a-textarea v-model:value="billInfo.remark"
                                    :disabled="resignFlag" :rows="3"/>
                    </a-form-item>
                </a-col>
            </a-row>
            <a-form-item v-if="!resignFlag">
                <a-space>
                    <a-button type="primary" @click="submitOk">提交申请</a-button>
                    <a-button type="default" @click="billInfoRef.resetFields()">重置</a-button>
                </a-space>
            </a-form-item>
        </a-form>
        <a-list
                v-if="resignFlag"
                item-layout="horizontal"
                size="large"
                style="margin-top: 10px"
                bordered
                :data-source="drawerData.comments"
        >
            <template #header>
                <div>批注列表</div>
            </template>
            <template #renderItem="{ item, index }">
                <a-list-item>
                    <a-list-item-meta>
                        <template #title>
                            {{ item.username }}({{item.roleName}})
                        </template>
                        <template #avatar>
                            <a-avatar :src="item.pic"/>
                        </template>
                        <template #description>{{item.fullMessage}}</template>
                    </a-list-item-meta>
                    <div>
                        {{formatDate(item.time)}}
                    </div>
                </a-list-item>
            </template>
        </a-list>
    </div>
</template>

<script>
    import {ref, onMounted, watch} from 'vue'
    import axios from 'axios'
    import {message, Form} from 'ant-design-vue'
    import {SyncOutlined, ExclamationCircleOutlined, CheckCircleOutlined} from '@ant-design/icons-vue'
    import store from '@/store'
    import dayjs from 'dayjs'

    export default {
        name: "Resign",
        components: {
            SyncOutlined,
            ExclamationCircleOutlined,
            CheckCircleOutlined
        },
        setup() {
            const commentColumns = [
                {
                    title: '时间',
                    dataIndex: 'time',
                    key: 'time',
                },
                {
                    title: '批注人',
                    dataIndex: 'userId',
                    key: 'user',
                },
                {
                    title: '批注信息',
                    dataIndex: 'fullMessage',
                    key: 'fullMessage',
                },
            ]

            const useForm = Form.useForm
            const loginUser = ref({})
            const resignTask = ref({})
            const drawerData = ref({})
            const billInfo = ref({
                title: '',
                resignDate: undefined,
                remark: ''
            })
            const billInfoRef = useForm(billInfo, {
                title: [{required: true, message: '请输入离职标题', trigger: ['change']}],
                resignDate: [{required: true, message: '请选择离职时间', trigger: ['change']}],
                remark: [{required: true, message: '请输入离职原因', trigger: ['change']}],
            })
            const resignFlag = ref(false)

            watch(resignFlag, () => {
                console.log("是否正在离职", resignFlag.value)
            })

            const load = () => {

                axios.get('resignProcess/getResignInfo/' + loginUser.value.id).then(rs => {
                    console.log("查找离职信息结果：", rs)
                    if (rs.data.isResign) {
                        drawerData.value = rs.data.taskForm
                        billInfo.value = drawerData.value.billInfo
                        billInfo.value.resignDate = dayjs(billInfo.value.resignDate)
                        resignTask.value = rs.data.task
                        resignFlag.value = true
                    } else {
                        billInfoRef.resetFields()
                        resignFlag.value = false
                    }
                })
            }

            const submitOk = () => {
                billInfoRef.validate().then(() => {
                    console.log("通过校验")
                    billInfo.value.userId = loginUser.value.id
                    console.log("提交数据", billInfo.value)
                    axios.post('resignProcess/startProcess', billInfo.value).then(rs => {
                        if (rs.code == 200) {
                            message.success("成功提交申请，等待审批")
                            load()
                        }
                    })
                }).catch((e) => {
                    console.log("校验失败", e)
                })

            }

            const cancelResign = () => {
                console.log("查看当前的Task信息", resignTask.value)
                axios.get('process/deleteByTaskId/' + resignTask.value.taskId).then(rs => {
                    if (rs.code == 200) {
                        message.success("成功取消离职申请")
                        load()
                    } else {
                        message.error(rs.message)
                    }
                })
            }

            const onChange = (value, dateString) => {
                console.log('Selected Time: ', value);
                console.log('Formatted Selected Time: ', dateString);
            };

            const formatDate = (time) => {
                return dayjs(time).format('YYYY-MM-DD HH:mm:ss')
            }

            const disabledDate = current => {
                return current < dayjs().subtract(1, 'days').endOf('day');
            };

            onMounted(() => {
                loginUser.value = store.state.user
                load()
            })
            return {
                load,
                submitOk,
                drawerData,
                commentColumns,
                billInfoRef,
                loginUser,
                formatDate,
                resignFlag,
                onChange,
                disabledDate,
                cancelResign,
                resignTask,
                billInfo
            }
        }
    }
</script>

<style scoped>
    .cardContent {
        background: #fff;
        margin: 10px 10px 0 10px;
        padding: 15px;
    }
</style>